<template>
    <div>
        <basic-container v-if="!detailShow">
            <statistics-card style="margin-bottom:20px" :cardInfo="cardInfo" :cardData="basicInfo" />
            <div class="madp-search">
                <el-form :model="searchForm" ref="searchForm" class="madp-search-form" label-width="130px">
                    <el-form-item label="CRM客户姓名:">
                        <el-input type="text" placeholder="请输入CRM客户姓名" v-model.trim="searchForm.crmName" maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号:">
                        <el-input type="text" placeholder="请输入手机号" v-model.trim="searchForm.mobile" @input="searchForm.mobile = searchForm.mobile.replace(/\D/g, '')" maxlength="11"></el-input>
                    </el-form-item>
                    <el-form-item label="客户号:">
                        <el-input type="text" placeholder="请输入客户号" v-model.trim="searchForm.custNo" maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="类型:">
                        <el-select v-model="searchForm.type" placeholder="请选择">
                            <el-option v-for="item in optionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="madp-tar">
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button plain @click="reset">清空</el-button>
            </div>
            <div class="madp-async-time">
                <el-button type="primary" @click="handleRefresh">同步客户</el-button>
                <div v-if="asyncTime">最后一次同步时间:{{ asyncTime }}</div>
            </div>
            <el-table
                :header-cell-style="{
                    background: 'rgb(255, 191, 191)',
                    color: 'rgb(44,44,44)'
                }"
                :data="tableData"
                style="width: 100%"
                v-loading="loading"
            >
                <el-table-column label="序号" width="60">
                    <template slot-scope="scope">
                        <span v-text="getIndex(scope.$index)"></span>
                    </template>
                </el-table-column>
                <el-table-column label="头像" width="80" prop="avatar">
                    <template slot-scope="scope">
                        <img class="madp-avatar" :src="scope.row.avatar" :onerror="`src='/img/${scope.row.gender === 1 ? 'male' : 'female'}.png'`" />
                    </template>
                </el-table-column>
                <el-table-column label="外部联系人名称" prop="nickName">
                    <template slot-scope="scope">
                        {{ scope.row.name || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="CRM客户姓名" prop="name">
                    <template slot-scope="scope">
                        {{ scope.row.crmName || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="客户号" prop="businessNo">
                    <template slot-scope="scope">
                        <span v-if="scope.row.businessNo !== ''">{{ scope.row.businessNo }}</span>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column label="性别" prop="gender">
                    <template slot-scope="scope">
                        <span v-if="scope.row.gender == 0">未知</span>
                        <span v-if="scope.row.gender == 1">男</span>
                        <span v-if="scope.row.gender == 2">女</span>
                    </template>
                </el-table-column>
                <el-table-column label="类型" prop="type">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type == 1">微信用户</span>
                        <span v-if="scope.row.type == 2">企业微信用户</span>
                    </template>
                </el-table-column>
                <el-table-column label="所属企业" prop="corpName">
                    <template slot-scope="scope">
                        <span v-if="scope.row.corpName !== ''">{{ scope.row.corpName }}</span>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" prop="mobile">
                    <template slot-scope="scope">
                        <span v-if="scope.row.mobile !== ''">{{ scope.row.mobile }}</span>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop>
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleQuery(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="madp-table-page">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.current"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                ></el-pagination>
            </div>
            <tabsTime ref="tabs1" :form="statisticDimensionTypes" :curDeptId="curDeptId" @changeViews="changeViews1" />
            <div id="madp-chart-e1"></div>
        </basic-container>
        <customer-detail-new v-else :detailMsg="detailMsg" @goBack="goBack"></customer-detail-new>
    </div>
</template>
<script>
import customerDetailNew from '@/views/customer/customer-manage/detail-new';
import { getCusInfo, getWorkContactList, synContact, tendencyData } from '@/api/madp-customer/madp-customer-new';
import StatisticsCard from '@/components/statistics-card/';
import tabsTime from '@/components/tabs-time-choose';
import { mapState } from 'vuex';
export default {
    components: {
        customerDetailNew,
        StatisticsCard,
        tabsTime
    },
    props: [],
    data() {
        return {
            // 部门id
            curDeptId: '',
            // 基础信息卡数据
            cardInfo: [
                {
                    label: '客户总数量',
                    key: 'contactTotalCount',
                    color: '#FFD700'
                },
                {
                    label: '新增同步客户数',
                    key: 'crmContactCountYesterdayAddedCount',
                    color: 'rgb(123, 215, 0)'
                },
                {
                    label: 'CRM客户数',
                    key: 'crmContactCount',
                    color: 'rgb(23, 115, 70)'
                },
                {
                    label: '行外客户数',
                    key: 'nonBankContactCount',
                    color: '#FF8C00'
                },
                {
                    label: '微信客户总数',
                    key: 'wxContactCount',
                    color: '#90EE90'
                },
                {
                    label: '企业微信客户总数',
                    key: 'qywxContactCount',
                    color: 'rgb(223, 55, 70)'
                }
            ],
            // 显示type
            statisticDimensionTypes: [
                {
                    label: '客户总数量',
                    value: 1
                },
                {
                    label: 'CRM客户数',
                    value: 2
                },
                {
                    label: '行外客户数',
                    value: 3
                },
                {
                    label: '微信客户总数',
                    value: 4
                },
                {
                    label: '企业微信客户总数',
                    value: 5
                }
            ],
            // 表格数据
            basicInfo: [],
            // 分页
            page: {
                current: 1,
                size: 10,
                total: 0
            },
            // 同步时间
            asyncTime: '',
            // 详情展示开关
            detailShow: false,
            // 详情数据
            detailMsg: {},
            // 显示更多按钮
            showMoreSearch: false,
            // 信息表格数据
            infoData: [],
            // 表格数据
            tableData: [],
            // 选项
            options: [
                {
                    value: 0,
                    label: '未知'
                },
                {
                    value: 1,
                    label: '男'
                },
                {
                    value: 2,
                    label: '女'
                }
            ],
            // 选项
            optionList: [
                {
                    value: 1,
                    label: '微信用户'
                },
                {
                    value: 2,
                    label: '企业微信用户'
                }
            ],
            // 查询表单
            searchForm: {
                name: '',
                mobile: '',
                type: '',
                custNo: ''
            },
            // loading开关
            loading: false,
            //折线图数据
            chartInfo: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'line' // 默认为直线，可选为:'line' | 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    name: '人数',
                    type: 'value'
                },
                series: [
                    {
                        name: '客户总数',
                        type: 'line',
                        data: [150, 230, 224, 218, 135, 147, 260],
                        lineStyle: {
                            color: '#ED5555'
                        },
                        itemStyle: {
                            color: '#ED5555'
                        }
                    }
                ]
            }
        };
    },
    computed: {
        ...mapState({
            userInfo: (state) => state.user.userInfo
        })
    },
    created() {
        this.init();
    },
    mounted() {
        this.getWorkContactList();
    },
    methods: {
        // 初始化
        init() {
            this.curDeptId = this.userInfo.deptId;
            getCusInfo().then((res) => {
                if (res.data.code != 0) return;
                this.basicInfo = res.data.data;
            });
        },
        //获取表格序号
        getIndex($index) {
            return (this.page.current - 1) * this.page.size + $index + 1;
        },
        // 点击返回
        goBack() {
            this.detailShow = false;
        },
        // 点击查询
        handleSearch() {
            this.page.current = 1;
            this.getWorkContactList();
        },
        // 重置
        reset() {
            this.searchForm = {};
            this.getWorkContactList();
        },
        //同步
        handleRefresh() {
            this.loading = true;
            synContact()
                .then((res) => {
                    if (res.data.code === 0) {
                        this.$message({
                            type: 'success',
                            message: '同步成功'
                        });
                        this.getWorkContactList();
                        this.$forceUpdate();
                    }
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        //获取客户管理列表
        getWorkContactList(data) {
            if (!data) this.page.current = 1;
            let params = {
                current: this.page.current,
                size: this.page.size,
                ...this.searchForm
            };
            if (!params.name) delete params.name;
            if (!params.mobile) delete params.mobile;
            if (!params.type) delete params.type;
            if (!params.custNo) delete params.custNo;
            this.loading = true;
            getWorkContactList(params)
                .then((res) => {
                    this.loading = false;
                    if (res.data.code != 0) return;
                    this.tableData = res.data.data.records;
                    this.asyncTime = res.data.data.extraProps.syncContactTime;
                    this.page.total = res.data.data.total;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        // 显示详情
        handleQuery(row) {
            this.detailShow = true;
            this.detailMsg = row;
        },
        // 分页
        handleSizeChange(val) {
            this.page.size = val;
            this.getWorkContactList(1);
        },
        // 分页
        handleCurrentChange(val) {
            this.page.current = val;
            this.getWorkContactList(1);
        },
        // 改变条件 更新图表
        changeViews1(obj) {
            if (this.curDeptId != '') {
                tendencyData(obj).then((res) => {
                    if (res.data.code != 0) return;
                    let xAxisData = [],
                        seriesData = [],
                        arr = res.data.data;
                    arr.map((item) => {
                        xAxisData.push(item.time);
                        seriesData.push(item.number);
                    });
                    this.chartInfo.xAxis.data = xAxisData;
                    this.chartInfo.series[0].data = seriesData;
                    let name = '';
                    name = this.statisticDimensionTypes.filter((i) => {
                        return i.value === obj.type;
                    })[0].label;
                    this.chartInfo.tooltip.formatter = `{b}<br>${name}: {c}`;

                    let echarts = require('echarts');

                    // 绘制图表
                    this.$nextTick(() => {
                        // 基于准备好的dom，初始化echarts实例
                        let myChart = echarts.init(document.getElementById('madp-chart-e1'));
                        myChart.setOption(this.chartInfo);
                        window.addEventListener('resize', function() {
                            myChart.resize();
                        });
                    });
                });
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.madp-search-form {
    display: flex;
    flex-wrap: wrap;
}
#madp-chart-e1 {
    width: 100%;
    height: 650px;
    margin: 0 auto;
}
.madp-search {
    display: flex;
}
.madp-search-right {
    min-width: fit-content;
}
.madp-avatar {
    width: 40px;
    height: 40px;
}
.madp-async-time {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
}
.madp-table-page {
    padding: 10px;
    display: flex;
    justify-content: flex-end;
}
</style>
